<template>
  <div class="card-out-container">
    <a-spin :spinning="spinning">
      <CustomTable rowKey="id" :loading="loading" bordered size="small" :dataSource="dataSource" :columns="columns" :scroll="{y: 'calc(100vh - 320px)'}" :pagination="ipagination" @change="handleTableChange" :rowSelection = null :showMore="showMore" :operateMargin="true" :drag="false" storeTableName="staffProductionDetailDay"  tableColumnsSort="staffProductionDetailDaySort" :resizeColumns="true">

        <template #operateLeft>
          <div class="operate-left">
            <a-button type="primary" @click="exportTable" class="mr-10">{{ $t('common.outputExcel') }}</a-button>
            <!--<a-button type="primary" ghost @click="printTable">打印</a-button>-->
          </div>
        </template>
        <template #operateRight>
          <div class="slot-operate-right">
            <a-form layout="inline">
              <a-form-item :label="$t('deviceManage.waterLineNo')" >
                <a-select v-model:value="queryParam.lineNoList"  mode="multiple" :placeholder="$t('common.pleaseSelect')" allowClear show-search>
                  <a-select-option v-for="item in waterList" :key="item.key" :value="item.lineNo">{{ item.lineNo }}</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item :label="$t('basicData.styleNo')" >
                <a-select v-model:value="queryParam.styleNo" mode="multiple" :placeholder="$t('common.pleaseSelect')" allowClear show-search>
                  <a-select-option v-for="item in styleList" :key="item.key" :value="item.styleNo">{{ item.styleNo }}</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item :label="$t('hangManage.makeNo')" >
                <a-select v-model:value="queryParam.moNo" mode="multiple" :placeholder="$t('common.pleaseSelect')" allowClear show-search>
                  <a-select-option v-for="item in allMakeList" :key="item.key" :value="item.moNo">{{ item.moNo }}</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item :label="$t('basicData.jobNoName')" >
                <a-input v-model:value.trim="queryParam.staffNameOrstaffNo" :placeholder="$t('common.pleaseInput')" allowClear />
              </a-form-item>
              <a-form-item :label="$t('common.selectDate')">
                <a-range-picker v-model:value="queryParam.time" :placeholder="[$t('common.startDate'), $t('common.endDate')]" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD"  />
              </a-form-item>
              <a-form-item >
                <a-space>
                  <a-button type="primary" @click="loadData">{{ $t('common.search') }}</a-button>
                </a-space>
              </a-form-item>
            </a-form>

          </div>
        </template>
      </CustomTable>
      <div style="display:none;">
        <a-table id="printId" :loading="loading" bordered size="small" :dataSource="printDataList" :columns="printColumnsArr" :pagination="false">

        </a-table>
      </div>
    </a-spin>
  </div>
</template>
<script>
import { ListMixinPm } from '@/mixin/listMixinPm.js'
import { columns } from './modules/config.js'
import { cloneDeep } from 'lodash'
import {filterObj, startTimeValue, endTimeValue, getLocalStorage ,toLineName} from '@/utils'
import { mapState } from 'vuex'
import { store } from '@/store'
import axios from "@/utils/request"
import printJS from "print-js"
import CustomTable from "@/components/commonTable/customTable.vue"
// import filterDropdown from "@/components/filterDropdown/filterDropdown.vue";

export default {
  name: 'staffProductionDetailDay',
  mixins: [ListMixinPm],
  components: {
    CustomTable
    // filterDropdown
  },
  data () {
    return {
      columns: columns,
      spinning: false,
      printDataList: [],
      url: {
        list: '/api/report/get-staff-production-details',
        exportUrl: '/api/report/export-staff-production-details'
      },
      columnsArr : [],
      columnsTitleArr : [],
      printColumnsArr : [],
      queryParam: {},
      showData: false,
    }
  },
  async created() {
    await store.dispatch('getStyle')
    await store.dispatch('getAllMake')
    await store.dispatch("getWater");
    this.showData = true
  },
  computed: {
    ...mapState({
      styleList: state => state.normalData.styleList,
      allMakeList: state => state.normalData.allMakeList,
      waterList: (state) => state.normalData.waterList,
    })
  },
  methods: {
    // formatTime,
    handleTableChange (pagination, filters, sorter) {
      /*['styleNo', 'moNo'].forEach(i => {
        this.queryParam[i] = (filters || {})[i]
      })*/
      if (Object.keys(sorter).length > 0) {
        this.isorter.field = sorter.order ? toLineName(sorter.field) : ''
        this.isorter.order = sorter.order ? sorter.order == 'ascend' ? 'asc' : 'desc' : ''
      }
      this.ipagination = Object.assign(this.ipagination, pagination)
      this.loadData()
    },
    getQueryParams () {
      if (!this.showData) return  false
      this.getColumnsList()
      let param = cloneDeep(this.queryParam)
      if (this.queryParam.time && this.queryParam.time.length) {
        param.startProductTime = startTimeValue(this.queryParam.time[0])
        param.endProductTime = endTimeValue(this.queryParam.time[1])
        this.queryParam.startProductTime = startTimeValue(this.queryParam.time[0])
        this.queryParam.endProductTime = endTimeValue(this.queryParam.time[1])
      }else{
        param.startProductTime = null
        param.endProductTime = null
        this.queryParam.startProductTime = null
        this.queryParam.endProductTime = null
      }
      delete param.time
      param.sortingFields = this.isorter.field ?  [this.isorter] : null
      this.queryParam.sortingFields = this.isorter.field ?  [this.isorter] : null
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      // console.log(param)
      return filterObj(param)
    },

    async printTable () {
      await this.getColumnsList()
      this.queryParam.pageNo = 1
      this.queryParam.pageSize = 65335
      const res = await axios.postAction(this.url.list, this.queryParam);
      if (!res.data) return
      this.spinning = true;
      if (res) {
        this.printDataList = res.data.list;
        if (this.printDataList.length > 0) {
          setTimeout(() => {
            this.printTableData();
            this.spinning = false;
          }, 2000);
        } else {
          this.spinning = false;
        }
      }
    },
    //打印
    printTableData () {
      printJS({
        printable: "printId", // 标签元素id
        type: "html",
        documentTitle: "[员工-生产详情]",
        style: "#printId{width:100%;} "
          + " #printId .ant-table-thead>tr>th, #printId .ant-table-tbody>tr>td  {border: 1px solid #bcb8b8;border-collapse: collapse;} "
          + " #printId table{border-collapse: collapse;} "
      });
    },
    async exportTable(){
      await this.getColumnsList()
      let param = {
        pageNo: 1,
        pageSize: 65335,
        columns:this.columnsArr ,
        tables:this.columnsTitleArr,
        sortingFields:this.queryParam.sortingFields,
        startProductTime:this.queryParam.startProductTime,
        endProductTime:this.queryParam.endProductTime,
        staffNameOrstaffNo:this.queryParam.staffNameOrstaffNo,
        styleNo:this.queryParam.styleNo,
        moNo:this.queryParam.moNo,
        lineNoList: this.queryParam.lineNoList,
      }
      this.exportExcels(this.url.exportUrl, '员工-生产详情', true,param)
    },
    async getColumnsList(){
      let colArr = [];
      let paramsArr = [];
      let titleArr = [];
      let hangerTrackTable =  getLocalStorage("staffProductionDetailDay") ? getLocalStorage("staffProductionDetailDay") : columns;

      if (hangerTrackTable && hangerTrackTable.length>0){
        hangerTrackTable.forEach(
            item=>{
              if (item.visibility){
                paramsArr.push(item.dataIndex)
                titleArr.push(item.title)
                colArr.push(item)
              }
            }
        )
      }
      this.columnsArr = paramsArr;
      this.columnsTitleArr = titleArr;
      this.printColumnsArr = colArr;
      // console.log(colArr,titleArr,paramsArr)
    },

  }
}
</script>
